<style lang="less">
  @import './menuManager.less';
</style>
<template>
  <div>
    <Row>
      <Col span="24">
      <Card>
        <p slot="title">
          <Icon type="ios-list"></Icon>
          菜单列表
        </p>
        <Row>
          <Button type="info" style="margin-top:10px;" @click="openAddMenu"
                  v-hasPermissionButton="'/admim/menu/addMenuButton'">
            <span>添加菜单或按钮</span>
          </Button>
        </Row>
        <Row>
          <tree-grid
            :items='menuList'
            :columns='columnsHeader'
            @on-row-click='rowClick'
          ></tree-grid>
        </Row>
      </Card>

      </Col>
    </Row>


    <Modal v-model="showSaveAndEdit" :title="saveAndEditTitle" :mask-closable="false" @on-ok="saveOrEditMenu">
      <Form :model="menuInfo" label-position="left" :label-width="100">
        <FormItem label="名称">
          <Input v-model="menuInfo.menuName"></Input>
        </FormItem>
        <FormItem label="图标">
          <Input v-model="menuInfo.menuIcon"></Input>
        </FormItem>
        <FormItem label="类型">
          <RadioGroup v-model="menuInfo.menuType">
            <Radio label="1">菜单</Radio>
            <Radio label="2">按钮</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="url">
          <Input v-model="menuInfo.menuUrl"></Input>
        </FormItem>
        <FormItem label="父菜单">
          <Select v-model="menuInfo.menuParentId" filterable>
            <Option v-for="menuParent in menuParents" :value="menuParent.menuId"
                    :key="menuParent.menuId">{{ menuParent.menuName }}
            </Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>


  </div>
</template>
<script>
  import util from '@/lib/util.js';
  import TreeGrid from '@/components/treeGrid'

  export default {

    components: {
      TreeGrid
    },
    data() {
      return {
        columnsHeader: [
          {
            title: '菜单ID',
            key: 'menuId',
            width: '150',
          },
          {
            title: '菜单名称',
            key: 'menuName',
            width: '150',
          },
          {
            title: '父菜单名称',
            key: 'prentMenuName',
            width: '150',
          },
          {
            title: '类型',
            key: 'menuTypeName',
            width: '150',
          },
          {
            title: '菜单地址',
            key: 'menuUrl',
            width: '150',
          },
          {
            title: '菜单图标',
            key: 'menuIcon',
            width: '150',
          },
          {
            title: '菜单状态',
            key: 'menuStateName',
            width: '150',
          }, {
            title: '操作',
            type: 'action',
            actions: [{
              type: 'primary',
              text: '编辑'
            }, {
              type: 'error',
              text: '删除'
            }],
            width: '150',
          }
        ],
        menuList: [],
        showSaveAndEdit: false,
        saveAndEditTitle: '',
        menuInfo: {},
        menuParents: []


      }
    },
    mounted() {
      this.getMenuList();
    },
    created() {

    },
    methods: {
      rowClick(data, event, index, text) {
        if (text === '编辑') {
          this.openEditMenuModal(data);
        }
        if (text === '删除') {
          this.$Modal.confirm({
            title: '提示',
            content: '确定要删除吗?',
            onOk: () => {
              let that = this;
              util.queryPost('/admin/menu/remove', {id: data.menuId}, function (data) {
                that.getMenuList();
              });
            }
          });
        }

      },

      openEditMenuModal(data) {
        this.showSaveAndEdit = true;
        this.saveAndEditTitle = '编辑菜单信息';
        this.menuInfo = data;
        this.menuInfo.menuType = data.menuType+"";
      },
      saveOrEditMenu() {
        let that = this;
        let url = '';
        if (that.menuInfo.menuId) {
          //编辑
          url = '/admin/menu/update';
        } else {
          //保存
          url = '/admin/menu/add';
        }
        util.post(url, this.menuInfo, function (data) {
          that.getMenuList();
          that.menuInfo = {};

        })

      },
      loopMenuList(item) {
        if (item.menuType === 1) {
          this.menuParents.push(item);
        }
        if (item.children && item.children.length > 0) {
          item.children.forEach(children => {
            this.loopMenuList(children);
          });
        }

      },
      openAddMenu() {
        this.menuInfo = {
          menuId: null
        };
        this.showSaveAndEdit = true;
        this.saveAndEditTitle = '添加按钮活菜单';
      },


      getMenuList() {
        this.menuList = [];
        this.menuParents = [];
        let that = this;
        util.post('/admin/menu/getMenuList', {}, function (data) {
          data.forEach(item => {
            that.menuList.push(item);
            that.loopMenuList(item);
          });

        });
      }
    }
  }
</script>
